<template>
    <div class="h-full flex flex-col bg-white">
        <div class="flex justify-between items-center p-4">
            <el-space>
                <el-select
                    v-model="currentMachine"
                    filterable
                    placeholder="查询指定考勤机记录"
                    @change="onChange"
                >
                    <el-option
                        v-for="(item, index) in machine"
                        :key="item.key"
                        :label="item.name"
                        :value="item.ip"
                    />
                </el-select>
                <el-input
                    v-model="employee"
                    :formatter="(v) => v"
                    :parser="
                        (v) => {
                            if (!v) {
                                return undefined
                            }
                            return v
                        }
                    "
                    clearable
                    placeholder="查询指定人员"
                    @clear="() => (employee = undefined)"
                >
                    <template #append>
                        <el-button :icon="Search" @click="getList" />
                    </template>
                </el-input>
                <el-button type="primary" @click="getList">刷新页面</el-button>
            </el-space>

            <el-button type="primary" @click="() => (show.add = true)"
                >录入人员</el-button
            >
        </div>
        <div class="flex-1 flex flex-col pl-4 pr-4">
            <el-table
                v-loading="loading"
                element-loading-text="加载中"
                stripe
                border
                :data="tableData"
                style="width: 100%; height: calc(100vh - 8rem)"
            >
                <el-table-column
                    label="序号"
                    min-width="80"
                    align="center"
                    type="index"
                />
                <el-table-column
                    resizable
                    min-width="100"
                    h
                    v-for="[prop, label, formatter] in tableHeader"
                    :prop="prop"
                    :label="label"
                    :formatter="formatter"
                    align="center"
                ></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="{ row }">
                        <el-space>
                            <el-button
                                type="primary"
                                size="small"
                                @click="() => handleEdit(row)"
                                >修改</el-button
                            >
                            <el-popconfirm
                                width="220"
                                confirm-button-text="确认"
                                cancel-button-text="取消"
                                :icon="InfoFilled"
                                icon-color="red"
                                :title="`确认删除 ${row.userName}`"
                                @confirm="() => handleDelete(row.FaceEntityId)"
                            >
                                <template #reference>
                                    <el-button type="danger" size="small"
                                        >删除</el-button
                                    >
                                </template>
                            </el-popconfirm>
                        </el-space>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <el-pagination
                    :current-page="pagination.pageNumber"
                    :page-size="pagination.articleNumber"
                    :page-sizes="[10, 20]"
                    layout="sizes, prev, pager, next"
                    :total="pagination.altogether"
                    @current-change="onCurrentChange"
                    @size-change="onSizeChange"
                />
            </div>
        </div>
    </div>
</template>
<script setup>
/**
 * Vue3
 */
import { h, onMounted, reactive, ref, watchEffect } from 'vue'
/**
 * Vue图片
 */
import { InfoFilled, Search } from '@element-plus/icons-vue'

/**
 * 加载中
 */
const loading = ref(false)

/**
 * 获取设备
 */
const machine = JSON.parse(localStorage.getItem('machine'))
const currentMachine = ref(machine[0].ip)

/**
 * 当前指定的员工
 */
const employee = ref()
/**
 * 表头
 */
const tableHeader = [
    ['userName', '姓名'],
    [
        'base64ImagePath',
        '照片',
        (row, column, cellValue, index) =>
            h(ElAvatar, {
                shape: 'square',
                size: 80,
                fit: 'cover',
                style: 'background:transparent',
                src: `data:image/png;base64,${row.base64ImagePath}`
            })
    ],
    ['personInfoNo', '工号'],
    [
        'registerTime',
        '添加时间',
        (row, column, cellValue, index) => formatDate(cellValue)
    ]
]

/**
 * 分页
 */
const pagination = reactive({
    pageNumber: 1,
    articleNumber: 10,
    altogether: 0
})

/**
 *
 */
function getList() {}
</script>